<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <div class="title">
          <img src="@/assets/icons/部门.png" alt="review" class="icon">
          <span>部门管理</span>
        </div>
      </el-col>
    </el-row>

    <el-row class="filter-container">
      <el-input
        v-model="searchId"
        :placeholder="tip"
        class="filter-item"
        style="width: 30%;margin-right: 20px"
        @keyup.enter.native="handleFilter" />
      <!-- <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button> -->
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </el-row>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="deptListView"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="部门编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="148px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.$index,scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Dialog
      :dialogVisible="dialogVisible"
      :cacleOrSuccessCallback="handleResult"
      :dialogTitle="operation"
      :getDept="() => {return deptOnEditing}"
    />
  </div>
</template>

<script>
import Dialog from './Dialog'
import { findAllDept, deleteDeptById } from '@/api/dept'

export default {
  name: 'DeptTable',

  components: { Dialog },

  data() {
    return {
      searchId: '',
      tip: '请输入部门id或名称查询 留空查询全部',
      tableKey: 0,
      dialogVisible: false,
      deptListOrg: [],
      deptOnEditing: {
        id: '',
        name: '',
        permission: ''
      },
      listLoading: true,
      operation: ''
    }
  },

  computed: {
    deptListView() {
      if (this.searchId) {
        return this.deptListOrg.filter(d => {
          return `${d.id}`.startsWith(`${this.searchId}`) ||
                 `${d.name}`.startsWith(`${this.searchId}`)
        })
      } else {
        return [...this.deptListOrg]
      }
    }
  },

  mounted: function() {
    this.getAllDepts()
  },

  methods: {
    getAllDepts: async function() {
      this.listLoading = true
      const res = await findAllDept()
      const { data } = res
      if (data.code === 0) {
        this.deptListOrg = data.data
      }
      this.listLoading = false
    },

    handleCreate: function() {
      this.operation = '添加部门'
      this.deptOnEditing = {}
      this.dialogVisible = true
    },

    handleUpdate: function(idx, dept) {
      this.operation = '修改部门'
      this.deptOnEditing = { ...dept }
      this.dialogVisible = true
    },

    handleDelete: async function(idx, dept) {
      const res = await deleteDeptById(dept.id)
      if (res.data && res.data.code === 0) {
        this.$notify({
          title: '成功',
          message: res.data.msg || '操作成功',
          type: 'success',
          duration: 2000
        })
        this.getAllDepts()
      }
    },

    handleResult: function(result) {
      this.dialogVisible = false
      if (result) {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
        this.getAllDepts()
      }
    }
  }
}
</script>

<style scoped>
  .filter-container {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 36px;
  }
</style>

